import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: new CustomScrollViewRoute());
  }
}

class CustomScrollViewRoute extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return new _CustomScrollViewRouteState();
  }
}

/*
代码分为三部分：
头部SliverAppBar：SliverAppBar对应AppBar，两者不同之处在于SliverAppBar可以集成到CustomScrollView。
SliverAppBar可以结合FlexibleSpaceBar实现Material Design中头部伸缩的模型，具体效果，读者可以运行该示例查看。
中间的SliverGrid：它用SliverPadding包裹以给SliverGrid添加补白。SliverGrid是一个两列，宽高比为4的网格，它有20个子widget。
底部SliverFixedExtentList：它是一个所有子元素高度都为50像素的列表。
*/
class _CustomScrollViewRouteState extends State<CustomScrollViewRoute> {
  double _barHeight = 250;
  Color _titleColor = Colors.white;
  void selectedColor(Color titleColor) {
    setState(() {
      _titleColor = titleColor;
    });
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Material(
      child: new CustomScrollView(
        slivers: <Widget>[
          new SliverAppBar(
            pinned: true,
            expandedHeight: _barHeight,
            flexibleSpace: FlexibleSpaceBar(
              title: Text('Demo', style: TextStyle(color: _titleColor,)),
              centerTitle: true,
              background: Image.asset(
                'assets/images/food05.jpeg',
                fit: BoxFit.cover,
              ),
            ),
          ),
          new SliverPadding(
            padding: const EdgeInsets.all(8),
            sliver: new SliverGrid(
              gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2, // 两列显示
                crossAxisSpacing: 10,
                mainAxisSpacing: 10,
                childAspectRatio: 4,
              ),
              delegate: new SliverChildBuilderDelegate(
                  (BuildContext context, int index) {
                //创建子widget
                // return new Container(
                //   alignment: Alignment.center,
                //   color: Colors.cyan[100 * (index % 9)],
                //   child: new FlatButton(
                //     child: new Text('grid item $index'),
                //     onPressed: () {},
                //   ),
                // );
                return new FlatButton(
                  color: Colors.cyan[100 * (index % 9)],
                  child: new Text('grid item $index'),
                  onPressed: () {
                    _barHeight += index;
                    selectedColor(Colors.cyan[100 * (index % 9)]);
                  },
                );
              }, childCount: 20),
            ),
          ),
          // list
          // new SliverFixedExtentList(
          //   itemExtent: 50,
          //   delegate: new SliverChildBuilderDelegate(
          //       (BuildContext context, int index) {
          //     //创建列表项
          //     return new Container(
          //       alignment: Alignment.center,
          //       color: Colors.lightBlue[100 * (index % 9)],
          //       child: new Text('list item $index'),
          //     );
          //   }, childCount: 50),
          // ),
          new SliverPadding(
              padding: const EdgeInsets.all(8),
              sliver: new SliverFixedExtentList(
                itemExtent: 50,
                delegate: new SliverChildBuilderDelegate(
                    (BuildContext context, int index) {
                  //创建列表项
                  return new Container(
                    alignment: Alignment.center,
                    color: Colors.lightBlue[100 * (index % 9)],
                    child: new Text('list item $index'),
                  );
                }, childCount: 50),
              ))
        ],
      ),
    );
  }
}
